require('./line.less')
require('../../assets/fonts/iconfont.css')

// 引入文档加载事件，dom选择器封装
let { $, $$, $$$ } = require('../../utils/dom')
//引入axios
const axios = require('../../utils/axios')

//引入顶部导航
const navTop = require('../../utils/nav-top')
navTop.showNavTop(location.hash.substr(1) === "2" ? "cycling":"running");

//引入底部导航
const nav = require('../../utils/nav')
nav.showNav('sports');
$(function () {
  /**
   * 初始化高德插件
   */
  var map = new AMap.Map('container', {
    zoom: 15,//级别
    center: [104.05603, 30.538176],//中心点坐标
    viewMode: '3D'//使用3D视图
  });
  // 起点添加
  var startMarker = new AMap.Marker({
    position: new AMap.LngLat(104.05603, 30.538176),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '起点'
  });
  //初始化多个插件对象
  AMap.plugin(['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Walking'], function () {
    // 初始化搜索对象
    var placeSearch = new AMap.PlaceSearch({
      city: '成都',
      map: map
    })
    // 自动添加添加列表对象
    var autoOptions = {
      // 城市，默认全国 
      city: "成都",
      // 使用联想输入的input的id
      input: "input_id"
    }
    // 
    var autocomplete = new AMap.AutoComplete(autoOptions)
    // 选中后搜索数据
    autocomplete.on('select', function (e) {
      // 隐藏input
      $$("#container").style.zIndex = "100";
      placeSearch.search(e.poi.name)
    })
    // 点击目标选择标记点
    placeSearch.on("markerClick", function (e) {
      let endMaker = e.data.location
      // 点击maker绘制路线
      start(startMarker._originOpts.position, endMaker);
      $$("#contenta").style.display = "block"
    })

    function start(startMarker, endMaker) {
      let walk = new AMap.Walking({
        // map 指定将路线规划方案绘制到对应的AMap.Map对象上
        map: map,
        // panel 指定将结构化的路线详情数据显示的对应的DOM上，传入值需是DOM的ID
        panel: "lineDetal"
      })
      walk.search(startMarker, endMaker);
      AMap.Event.addListener(walk, "complete", function (a) {
        $$("#mi").textContent = (a.routes[0].distance / 1000).toFixed(2)
        $$("#time").textContent = (a.routes[0].time / 60).toFixed(2)
      }); //返回导航查询结果
    }

  })
  // 点击取消刷新页面
  $$("#cancel").addEventListener("click", function () {
    location.reload();
  })
  $$("#startP").addEventListener("click", function () {
    location.href = "./sporting.html";
  })
})
